import * as THREE from "three";
import { colors, linewidth, setColor, setLineWidth } from "@/utils/config";
import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js';

const texture = new THREE.TextureLoader()
// todo 光柱材质
// 光柱材质
export const lightPillar = new THREE.MeshBasicMaterial({
  map: texture.load(require("@/images/light/lightPillar.png")),
  color: colors.light,
  transparent: true,
  depthWrite: false,
  side: THREE.DoubleSide,
})

// 标记点材质
export const lightPoint = new THREE.MeshBasicMaterial({
  map: texture.load(require("@/images/light/lightPoint.png")),
  color: colors.light,
  side: THREE.DoubleSide,
  transparent: true,
  depthWrite: false, // 禁止写入深度缓冲区数据
})

// 光圈材质
export const lightHalo = new THREE.MeshBasicMaterial({
  map: texture.load(require("@/images/light/lightHalo.png")),
  color: colors.light,
  side: THREE.DoubleSide,
  opacity: 0,
  transparent: true,
  depthWrite: false, // 禁止写入深度缓冲区数据
})

// todo 地图材质
// 1. 纹理材质
export const textureMap = texture.load(require('@/images/map/gz-map.jpg'))
textureMap.wrapS = THREE.RepeatWrapping
textureMap.wrapT = THREE.RepeatWrapping
textureMap.flipY = false
textureMap.rotation = THREE.MathUtils.degToRad(45)
// texture纹理显示设置
// texture.minFilter = THREE.NearestFilter;
// texture.magFilter = THREE.NearestFilter;
texture.encoding = THREE.sRGBEncoding // 设置纹理的颜色空间（普通的纹理）
textureMap.repeat.set(0.1, 0.1)

// 2-1. 地图顶部材质
export const topFace = new THREE.MeshPhongMaterial({
  map: textureMap, // 纹理贴图
  color: colors.topFace, // 0xb4eeea,
  combine: THREE.MultiplyOperation,
  transparent: true,
  opacity: 0.8,
});
// 2-2. 地图边缘材质
export const side = new THREE.MeshLambertMaterial({
  color: colors.side,
  transparent: true,
  opacity: 0.9
});

// 3-1. 顶部描边材质
export const upLine = new LineMaterial({
  color: colors.upLine,
  linewidth: linewidth,
  transparent: true,
  depthTest: false
});
// 3-2. 底部描边材质
export const downLine = new LineMaterial({
  color: colors.downLine,
  linewidth: linewidth,
  depthTest: false
});

// todo 柱状图材质
export const bar = new THREE.MeshStandardMaterial({
  emissive: 0x000000,
  // roughness: 0.45, // 粗糙度
  // metalness: 0.8, // 金属度
  transparent: true, // 使用背景透明的png贴图，注意开启透明计算
  side: THREE.DoubleSide, // 两面可见
  color: colors.bar,
  opacity: 0.8
});

// ^ 背景材质
export const bg = new THREE.MeshPhongMaterial({
  transparent: true,
  opacity: 1,
  depthTest: true,
  side: THREE.DoubleSide, // 两面可见
})

// todo 方法
// 更新材质颜色
export function setMaterialColor(colors) {
  lightHalo.color.set(colors.light)
  lightPoint.color.set(colors.light)
  lightPillar.color.set(colors.light)
  lightPillar.color.set(colors.light)
  topFace.color.set(colors.topFace)
  side.color.set(colors.side)
  upLine.color.set(colors.upLine)
  downLine.color.set(colors.downLine)
  bar.color.set(colors.bar)
  // bg.color.set(colors.bg)
}
// 更改描边线条宽度
export function setMaterialLine(linewidth) {
  downLine.linewidth = linewidth
  upLine.linewidth = linewidth
}